<template>
  <van-cell-group title="考核信息" class="panel-grade-score-info">
    <van-field  label-width="70px" label="考核部门" input-align="right" disabled v-model="grade.khbm"/>
    <van-field  label-width="70px" label="考核载体" input-align="right" disabled v-model="carrierText"/>
    <van-field required label-width="70px" label="考核内容" input-align="right" disabled v-model="contentText"/>
    <template v-if="carrier.content_item.item">
      <van-row class="first-row">{{carrier.content_item.item.substr(carrier.content_item.item.indexOf('。') + 1)}}</van-row>
      <van-row class="split-h last-row"/>
    </template>
    <van-field required label-width="70px" label="考核事项" input-align="right" disabled/>
    <van-row v-if="carrier.content_item.score_item.length > 0">
      <van-row
        v-for="(score) in carrier.content_item.score_item"
        :key="score.id"
        class="first-row">
        {{score.id + ' - ' + score.item}}
      </van-row>
      <van-row class="split-h last-row"/>
    </van-row>
    <van-field required label-width="70px" label="考核扣分" input-align="right" disabled v-model="grade.score"/>
  </van-cell-group>
</template>

<script>
export default {
  name: 'PanelGradeScoreInfo',
  props: ['grade'],
  data () {
    return {
      carrier: JSON.parse(this.grade.check_item) ? JSON.parse(this.grade.check_item) : this.$vo.createCarrier()
    }
  },
  computed: {
    carrierText: function () {
      console.log(this.carrier)
      if (this.carrier.id !== '') {
        return this.carrier.id + ' - ' + this.carrier.item
      } else {
        return ''
      }
    },
    contentText: function () {
      if (this.carrier.content_item.id !== '') {
        return this.carrier.content_item.id + ' - ' + this.carrier.content_item.item.substr(0, this.carrier.content_item.item.indexOf('。'))
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  .panel-grade-score-info {
    .van-field {
      font-size: 12px;
    }
    .first-row {
      font-size: 12px;
      color: #969799;
      padding: 5px 16px;
    }
    .last-row {
      margin-left: 16px;
    }
    .operate-area {
      padding: 20px 16px;
      .van-button {
        width: 100%;
      }
    }
  }
</style>
